<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>编辑容器服务</title>
    <link rel="stylesheet" type="text/css" href="../../js/layer/css/layui.css">
    <style>
        .zhanshop-form-label{
            float: left;
            width: 100%;
            text-align: left;
            line-height: 2.2em;
            color: #4d5259;
        }
        .text-pink{
            color: #f00;
        }
        .zhanshop-select{
            height: 38px;
            width: 100%;
            padding-left: 10px;
            padding-right: 10px;
            background: #fff;
            border: 1px solid #dddddd;
        }
        .layui-table{
            text-align: left;
        }
    </style>
</head>
<body>

<form class="layui-form" id="view">
    <div class="layui-tab layui-tab-brief" lay-filter="test-hash" style="text-align: center !important; position: relative;">
        <ul class="layui-tab-title" id="step-title">
            <li class="layui-this" id="layui-tab0" lay-id="11">基础信息</li>
            <li lay-id="22" id="layui-tab1">容器设置</li>
            <li lay-id="33" id="layui-tab2">存储设置</li>
        </ul>
        <div style="height: 40px; width: 100%; position: absolute; top: 0px;"></div>
        <div class="layui-tab-content" style="padding-left: 10px; padding-right: 10px;">
            <div class="layui-tab-item layui-show">
                <div class="demo-reg-container">

                    <div class="layui-form-item">
                        <label class="zhanshop-form-label"><b class="text-pink">*</b>服务名称</label>
                        <div class="layui-input-wrap">
                            <input id="base-name" autocomplete="off" type="text" name="base[name]" value="" lay-verify="required" placeholder="请输入服务名称" autocomplete="off" class="layui-input" >
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="zhanshop-form-label"><b class="text-pink">*</b>服务版本</label>
                        <div class="layui-input-wrap">
                            <input id="base-version" autocomplete="off" type="text" name="base[version]" value="" lay-verify="required" placeholder="请输入版本号" autocomplete="off" class="layui-input" >
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="zhanshop-form-label">描述说明</label>
                        <div class="layui-input-wrap">
                            <textarea id="base-description" name="base[description]" placeholder="请输入描述说明" autocomplete="off" class="layui-textarea"></textarea>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <button type="button" class="step-next layui-btn layui-bg-orange layui-btn-sm">下一步</button>
                    </div>

                </div>


            </div>

            <!--------->
            <div class="layui-tab-item">
                <div class="layui-form-item">
                    <label class="zhanshop-form-label"><b class="text-pink">*</b>镜像</label>
                    <div class="layui-input-wrap">

                        <select data-title="镜像" class="zhanshop-select" lay-verify="required" style="width: 100%" name="images[name]" id="images-name" lay-ignore>
                            <option value="">请选择</option>
                            {{#  arr_foreach(d.images, function(k1, v1){ }}
                            <option value="{{v1.image_name}}">{{v1.image_name}}</option>
                            {{#  }); }}
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="zhanshop-form-label">启动命令</label>
                    <div class="layui-input-wrap">
                        <input id="images-cmd" type="text" name="images[cmd]" placeholder="请输入启动命令如：php /var/www/cmd.php server start false" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-wrap">
                        <table class="layui-table">
                            <thead>
                            <tr style="background:#edeeee;">
                                <th width="25%">协议</th>
                                <th width="25%">服务端口</th>
                                <th width="25%">容器端口</th>
                                <th width="25%"><a href="javascript:void(0)" onclick="tableFromAdd('images-port')">添加端口</a></th>
                            </tr>
                            </thead>

                            <tbody id="images-port">
                            <tr>
                                <td>
                                    <select name="images[protocol][]" class="zhanshop-select" lay-ignore>
                                        <option>tcp</option>
                                        <option>udp</option>
                                    </select>
                                </td>
                                <td><input name="images[external_port][]" type="number" placeholder="请输入对外提供的端口号如：8080" class="layui-input" /></td>
                                <td><input name="images[internal_port][]" type="number" placeholder="请输入容器内占用的端口号如：80" class="layui-input" /></td>
                                <td><a href="javascript:void(0)" onclick="tableFromDel('images-port', this)">删除</a></td>
                            </tr>
                            </tbody>

                        </table>
                    </div>
                </div>



                <div class="layui-form-item">
                    <div class="layui-input-wrap">
                        <table class="layui-table">
                            <thead>
                            <tr style="background:#edeeee;">
                                <th width="25%">变量名</th>
                                <th width="25%">变量值</th>
                                <th width="25%">
                                    <a href="javascript:void(0)" onclick="tableFromAdd('envs')">添加更多</a> &nbsp;&nbsp;&nbsp;
                                </th>
                            </tr>
                            </thead>

                            <tbody id="envs">
                            <tr>
                                <td><input name="images[env][key][]" type="text" placeholder="请输入环境变量名如：PHP_APP_ENV" class="layui-input" /></td>
                                <td><input name="images[env][val][]" type="text" placeholder="请输入环境变量值如：test" class="layui-input"  /></td>
                                <td><a href="javascript:void(0)" onclick="tableFromDel('envs', this)">删除</a></td>
                            </tr>
                            </tbody>

                        </table>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="zhanshop-form-label">cpu限制(一个核相当于1000个微核如4核及4*1000)</label>
                    <div class="layui-input-wrap">
                        <input id="images-cpu" autocomplete="off" type="text" name="images[cpu]" value="" placeholder="cpu限制,不填不限制" autocomplete="off" class="layui-input" >
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="zhanshop-form-label">内存限制(字节单位，最小分配104857600及100M)</label>
                    <div class="layui-input-wrap">
                        <input id="images-ram" autocomplete="off" type="text" name="images[ram]" value="" placeholder="内存限制,不填不限制" autocomplete="off" class="layui-input" >
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="zhanshop-form-label">启用GPU支持</label>
                    <div class="layui-input-wrap" style="text-align: left;">
                        <input class="images-gpu" lay-ignore type="radio" name="images[gpu]" value="0" checked> 不启用
                        &nbsp;&nbsp;
                        <input class="images-gpu" lay-ignore type="radio" name="images[gpu]" value="1"> 启用
                    </div>
                </div>

                <div class="layui-form-item">
                    <button type="button" class="step-prev layui-btn layui-btn-primary layui-btn-sm">上一步</button>
                    <button type="button" class="step-next layui-btn layui-bg-orange layui-btn-sm">下一步</button>
                </div>

            </div>
            <!--------->

            <div class="layui-tab-item">

                <table class="layui-table">
                    <thead>
                    <tr style="background:#edeeee;">
                        <th width="25%">数据类型</th>
                        <th width="25%">数据名称</th>
                        <th width="25%">挂载点</th>
                        <th width="25%">
                            <a href="javascript:void(0)" onclick="tableFromAdd('volumes')">添加</a>
                        </th>
                    </tr>
                    </thead>

                    <tbody id="volumes">
                    <tr>
                        <td>
                            <select class="zhanshop-select" name="volume[type][]" onchange="volumechange(this)" lay-ignore>
                                <option value="">请选择</option>
                                <option value="bind">bind</option>
                                <option value="volume">volume</option>
                            </select>
                        </td>
                        <td>
                            <input name="volume[name][]" type="text" placeholder="请输入宿主机挂载点如：/data" class="layui-input">
                        </td>
                        <td><input name="volume[mount][]" type="text" placeholder="请输入容器内挂载点如：/var/www" class="layui-input"  /></td>
                        <td><a href="javascript:void(0)" onclick="tableFromDel('volumes', this)">删除</a></td>
                    </tr>
                    </tbody>

                </table>

                <div class="layui-form-item">
                    <button type="button" class="step-prev layui-btn layui-btn-primary layui-btn-sm">上一步</button>
                    <button type="button" lay-submit lay-filter="from-submit" class="layui-btn layui-btn-sm">确&nbsp;&nbsp;&nbsp;认</button>
                </div>

            </div>
            <div class="layui-tab-item">内容-4</div>
            <div class="layui-tab-item">内容-5</div>
        </div>
    </div>
</form>



<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="../../js/layer/layui.js"></script>
<script>
    ready(function() {
        layui.use(['zhanshop'], function(){
            $ = layui.$;
            zhanshop = layui.zhanshop;
            form = layui.form;
            var menuId = 'Cloudapp';//parent.layui.zhanshop.getParam('_id');

            zhanshop.view(API_ADDRESS +apiUrlTable+ '/' + menuId+"?pk="+layui.zhanshop.getParam('id'), '#view', function(data) {
                $("#base-name").val(data.data.name.replace("/", ""))
                $("#base-version").val(data.data.config.labels.version)
                $("#base-description").val(data.data.config.labels.description)
                if(data.data.config.image.indexOf(':') == -1){
                    $("#images-name").val(data.data.config.image+':latest');
                }else{
                    $("#images-name").val(data.data.config.image);
                }
                try {
                    $("#images-cmd").val(data.data.config.cmd.join(' '))
                }catch (e) {}

                if(data.data.hostconfig.memory > 0) $("#images-ram").val(data.data.hostconfig.memory);
                if(data.data.hostconfig.cpushares > 0) $("#images-cpu").val(data.data.hostconfig.cpushares);
                if(data.data.hostconfig.runtime == "nvidia") $(".images-gpu").eq(1).click();

                var portHtml = '';
                for(var port in data.data.networksettings.ports){
                    var ports = port.split("/");
                    if(data.data.networksettings.ports[port] == null) continue;
                    var rowport = data.data.networksettings.ports[port][0];
                    var selectProtocol = "";
                    var protocols = ['tcp', 'udp'];
                    for(var ii = 0; ii < protocols.length; ii++){
                        var selectOption = '';
                        if(protocols[ii] == ports[1]){
                            selectOption = 'selected';
                        }
                        selectProtocol += "<option value='"+protocols[ii]+"' "+selectOption+">"+protocols[ii]+"</option>";
                    }
                    portHtml += '<tr><td><select name="images[protocol][]" class="zhanshop-select" lay-ignore>'+selectProtocol+'</select></td><td><input name="images[external_port][]" type="number" placeholder="请输入对外提供的端口号如：8080" class="layui-input" value="'+rowport.hostport+'" /></td><td><input name="images[internal_port][]" type="number" placeholder="请输入容器内占用的端口号如：80" value="'+ports[0]+'" class="layui-input" /></td><td><a href="javascript:void(0)" onclick="tableFromDel(\'images-port\', this)">删除</a></td></tr>'
                }
                if(portHtml){
                    $("#images-port").html(portHtml);
                }


                var envsHtml = '';

                for(var envkey in data.data.envs){
                    envsHtml += '<tr><td><input name="images[env][key][]" type="text" placeholder="请输入环境变量名如：PHP_APP_ENV" class="layui-input" value="'+envkey+'" /></td><td><input name="images[env][val][]" type="text" placeholder="请输入环境变量值如：test" class="layui-input"  value="'+data.data.envs[envkey]+'" /></td><td><a href="javascript:void(0)" onclick="tableFromDel(\'envs\', this)">删除</a></td></tr>';
                }
                if(envsHtml){
                    $("#envs").html(envsHtml);
                }


                var volumeVals = {};
                for(var i in data.data.mounts){
                    var rowData = data.data.mounts[i];
                    //console.error(rowData)
                    volumeVals[rowData['name']] = 1;
                }
                var volumesHtml = '';
                for(var i in data.data.mounts){
                    var mountsData = data.data.mounts[i];
                    if(mountsData['type'] == 'volume'){
                        var volumesOption = '<option value="">请选择</option>';
                        console.error(data.volumes);
                        for(var ii in data.volumes){
                            var volumesData = data.volumes[ii];
                            var selectOption = '';
                            if(volumesData.name	== mountsData.name){
                                selectOption = 'selected';
                            }
                            volumesOption += '<option value="'+volumesData['name']+'" '+selectOption+'>'+volumesData['name']+'</option>';
                        }
                        var volumeInput = '<select class="zhanshop-select" name="volume[name][]" lay-ignore>'+volumesOption+'</select>';
                        var volumeType = '<select class="zhanshop-select" name="volume[type][]" onchange="volumechange(this)" lay-ignore><option value="">请选择</option><option value="bind">bind</option><option value="volume" selected>volume</option></select>';
                    }else {
                        var volumeInput = '<input name="volume[name][]" type="text" placeholder="请输入宿主机挂载点如：/data" class="layui-input" value="'+mountsData.source+'">';
                        var volumeType = '<select class="zhanshop-select" name="volume[type][]" onchange="volumechange(this)" lay-ignore><option value="">请选择</option><option value="bind" selected>bind</option><option value="volume">volume</option></select>';
                    }

                    volumesHtml += '<tr>' +
                        '<td>'+volumeType+'</td>' +
                        '<td>'+volumeInput+'</td>'+
                        '<td><input name="volume[mount][]" type="text" placeholder="请输入容器内挂载点如：/var/www" class="layui-input" value="'+mountsData.destination+'" /></td>'+
                        '<td><a href="javascript:void(0)" onclick="tableFromDel(\'volumes\', this)">删除</a></td>' +
                        '</tr>';
                }
                if(volumesHtml){
                    $("#volumes").html(volumesHtml);
                }
                //mounts
                //console.log(data.data.networksettings.ports)
                //console.log(data.data.name.replace("/", ""));
            }, 'POST', {"_method":"editfrom"});

            // 添加表单表格
            window.tableFromAdd = function (putDom){
                if($("#"+putDom).find("tr").length > 10){
                    return zhanshop.alert("端口限制上限为10个", 'danger');
                }
                var html = $("#"+putDom).find("tr").eq(0).prop('outerHTML');
                $("#"+putDom).append(html);
            }
            // 删除表单表格
            window.tableFromDel = function (putDom, obj){
                if($("#"+putDom).find("tr").length == 1){
                    return zhanshop.alert("必须保留一条", "danger");
                }
                $(obj).parent().parent().remove();
            }

            $(document).on('click', '.step-prev', function() {
                var stepLi = $("#step-title").find("li");
                for(var i in stepLi){
                    var li = stepLi[i]
                    if(li.className == "layui-this"){
                        var index = parseInt(i) - 1;
                        $("#layui-tab"+index).click();
                        break;
                    }
                }
            });



            $(document).on('click', '.step-next', function() {
                var showContent = $(".layui-show").eq(0);
                var allPass = true;

                var inputs = showContent.find("input");
                for(var i in inputs){
                    if(inputs[i].id != false && inputs[i].id != undefined){
                        var isValid = form.validate('#'+inputs[i].id);  // 主动触发验证，v2.7.0 新增
                        if(isValid == false){
                            allPass = false;
                            return false;
                        }
                    }
                }

                var textareas = showContent.find("textarea");
                for(var i in textareas){
                    if(textareas[i].id != false && textareas[i].id != undefined){
                        var isValid = form.validate('#'+textareas[i].id);  // 主动触发验证，v2.7.0 新增
                        if(isValid == false){
                            allPass = false;
                            return false;
                        }
                    }
                }

                var selects = showContent.find("select");
                for(var i in selects){
                    if(selects[i].id != false && selects[i].id != undefined){
                        var isValid = form.validate('#'+selects[i].id);  // 主动触发验证，v2.7.0 新增
                        if(isValid == false){
                            allPass = false;
                            zhanshop.alert($('#'+selects[i].id).data("title")+"不能为空", "danger");
                            return false;
                        }
                    }
                }

                if(allPass){
                    var stepLi = $("#step-title").find("li");
                    for(var i in stepLi){
                        var li = stepLi[i]
                        if(li.className == "layui-this"){
                            var index = parseInt(i) + 1;
                            $("#layui-tab"+index).click();
                            break;
                        }
                    }
                }
            });

            window.volumechange = function (obj){
                var next = $(obj).parent().next();
                if($(obj).val() == 'volume'){
                    var selectHtml = '<select class="zhanshop-select" name="volume[name][]" lay-ignore><option value="">请选择</option>';
                    for (var i in addfromData.volumes){
                        selectHtml += '<option value="'+addfromData.volumes[i]['name']+'">'+addfromData.volumes[i]['name']+'</option>';
                    }
                    selectHtml += '</select>';
                    next.html(selectHtml);
                }else{
                    next.html('<input name="volume[name][]" type="text" placeholder="请输入宿主机挂载点如：/data/wwwroot" class="layui-input">');
                }
            }

            // 提交事件

            form.on('submit(from-submit)', function(data){

                var submitData = data.field; // 获取表单字段值
                submitData['_method'] = 'PUT';
                // 我这里不要走json了
                layui.zhanshop.ajax(API_ADDRESS+apiUrlTable+'/'+menuId+'?pk'+'='+layui.zhanshop.getParam('id'), 'POST', submitData, {}, function(res){
                    return layui.zhanshop.alert('编辑成功', 'success', function(){
                        parent.window.location.reload();
                    });
                },function(xhr){
                    return layui.zhanshop.alert(xhr.responseJSON.msg ? xhr.responseJSON.msg : xhr.statusText, 'danger');
                }, true, apiFromJson);
                return false; // 阻止默认 form 跳转

            });
        });
    });
</script>

</body>
</html>